<template>
	<view>
		<u-sticky>
		<view class="head">
			<view class="head-left" @click="index1">
				<u-icon name="arrow-left" size="25" color="#fff" ></u-icon>
			</view>
			<view class="head-end">
				<text>用户排行</text>
			</view>
			<view class="head-right">		
			</view>
		</view>
		
		<view class="bangdan">
			<view class="bangdan-1":class="navIndex==0?'activite':''" @click="checkIndex(0)">
				<text>月榜</text>
			</view>
			<view class="bangdan-1":class="navIndex==1?'activite':''" @click="checkIndex(1)">
				<text>年榜</text>
			</view>
		</view></u-sticky>
		<view class="ranking" v-if="navIndex==0">
					<ranking></ranking>
		</view>
		<view class="ranking" v-if="navIndex==1">
			<rankingnian></rankingnian>
		</view>
	</view>
</template>

<script>
	import ranking from '../../components/ranking.vue'
	import rankingnian from '../../components/rankingnian.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				navIndex: 0,
			}
		},
		components:{
				ranking,
				rankingnian,
		},
		onLoad() {

		},
		methods: {
				  checkIndex(index) {
				    console.log(index)
				    this.navIndex = index;
				}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		width: 100%;
		text-align: center;
		padding: 5px 0;
		background-color: #1252C3;
		font-size: 20px;
		color: #fff;
		display: flex;
		position: fixed;
		z-index: 99;
		top: 0;
		.head-left{
			width:18%;
			padding-left: 2%;
			height: 35px;
			padding-top: 5px;
	
		}
		.head-end{
			width: 60%;
			height: 35px;
			padding-top: 5px;
	
		}
		.head-right{
			width: 20%;
			height: 40px;
	
		}
	}
	
	.bangdan{
		height: 100%;
		padding: 10px 0;
		background-color: #1252C3;
		display: flex;
		z-index: 11;
		    justify-content: center;
		.bangdan-1{
			width: 100px;
			height: 26px;
			padding-top: 4px;
			color: #fff;
			background-color: #1252C3;
			border: 1px solid #fff;
			text-align: center;
		}
		
	}
	.bangdan-1:nth-child(1){
		border-bottom-left-radius: 25px;
		border-top-left-radius: 25px;
	}
	.bangdan-1:nth-child(2){
		border-bottom-right-radius: 25px;
		border-top-right-radius: 25px;
	}
	.activite {
	            background-color: #fff !important;
	            color: #1252C3 !important;
	                                }
		.ranking{
			width: 100%;
		
		}
</style>
